<template>
  <div>
    <!-- 导航头部 -->
    <mt-header class="mt_header"
               fixed>
      <router-link to="/"
                   slot="left"
                   style="font-size: 16px;">
        <mt-button icon="back"
                   style="font-size: 16px;">我的关注</mt-button>
      </router-link>
    </mt-header>
    <!-- 家政员工列表头部 -->
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">家服公司</mt-tab-item>
      <mt-tab-item id="2">家服人员</mt-tab-item>
    </mt-navbar>
    <!-- 家政员工列表主体 -->
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <!-- 员工信息 -->
      <mt-tab-container-item id="2">
        <mt-cell class="user-passage">
          <service-user :list='atentionpersonelList' />
        </mt-cell>
      </mt-tab-container-item>
      <!-- 公司信息 -->
      <mt-tab-container-item class="company-item"
                             id="1">
        <mt-cell class="user-company"
                 :key="items.id"
                 v-for='(items) in atentionCompanyList'>
          <!-- 公司头像 -->
          <div class="user-company-photo">
            <img :src="items.companyphote"
                 alt="">
          </div>
          <!-- 公司信息-->
          <div class="user-company-page">
            <div class="divvv">
              <h4>{{items.companyName}}</h4>
            </div>
            <div class="company-three divvv">
              <span>{{items.companymoney}}</span>
            </div>
            <div class="company-two divvv">
              <span v-for="(item, index) in items.companyusers"
                    :key="index">{{item.companyuser}}</span>
              <!-- <span>服务好</span>
              <span>环境优美</span> -->
            </div>
          </div>
          <div class="company-four divvv">{{items.companyloader}}</div>
        </mt-cell>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import { getItem, setItem } from '@/mock/wsm.js'
import ServiceUser from '../service/serviceUser'
import { atentionCompany, atentionpersonel, caller } from '@/api/AttentionPersonnel.js'
export default {
  name: 'AttentionPersonnel',
  props: {},
  components: {
    ServiceUser
  },
  data () {
    return {
      selected: '1',
      atentionCompanyList: [], // 关注公司数据
      atentionpersonelList: [] // 员工数据
    }
  },
  created () {
    this.loader()
    this.lodd()
  },
  mounted () {

  },
  methods: {
    lodd () {
      const folllist = getItem('FollowList')
      console.log(folllist)
      this.atentionpersonelList = folllist
    },
    async loader () {
      try {
        const { data: res } = await atentionCompany()
        this.atentionCompanyList = res
        console.log(this.atentionCompanyList)
      } catch (err) {
        this.$toast('获取员工信息失败!' + err)
      }
    }
  },
  computed: {

  }
}
</script>

<style scoped lang="less">
.mt_header {
  height: 120px;
  background-color: #1196db !important;
}
/deep/ .mint-swipe {
  z-index: 999;
  padding-top: 80px;
  height: 342px;
  img {
    height: 100%;
    width: 100%;
  }
}
/deep/.mint-navbar {
  padding-top: 106px;
  background-color: #1196db;
}
.is-selected {
  color: #fff !important;
  border-bottom: 5px solid #fff !important;
}
/deep/ .mint-cell-wrapper {
  height: 100% !important;
}
.mt-cell {
  float: left;
}
.user-passage-page {
  position: relative;
  width: 448px;
  display: flex;
  flex-direction: column;
  align-items: center;
  div {
    padding-top: 20px;
    div:nth-child(0) {
      padding-top: 10px;
    }
  }
  h4 {
    margin: 0 0 0 -200px;
    font-weight: 700;
    font-size: 26px;
    color: #000;
  }
  .page-two {
    margin-left: -106px;
    color: #3f51b5;
    text-align: center;
    span {
      display: inline-block;
      height: 46px;
      line-height: 46px;
      width: 144px;
      border: 1px solid #3f51b5;
      border-radius: 20px;
    }
  }
}
.page-three {
  margin-left: 20px;
  .boer-three {
    padding: 0 8px;
  }
}
/deep/ .mint-cell-title {
  flex: none !important;
}
.page-money {
  position: absolute;
  top: 0%;
  left: 86%;
  height: 40px;
  width: 156px;
}
// 公司信息
.user-company-page {
  position: relative;
  width: 448px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .divvv {
    padding-top: 30px;
    div:nth-child(0) {
      padding-top: 20px;
    }
  }
  h4 {
    margin: 0 0 0 -52px;
    font-weight: 700;
    font-size: 26px;
    color: #000;
  }
  .company-two {
    color: #3f51b5;
    text-align: center;
    span {
      display: inline-block;
      height: 46px;
      line-height: 46px;
      width: 144px;
      border: 1px solid #3f51b5;
      border-radius: 20px;
    }
  }
}
.company-three {
  margin-left: -70px;
  .boer-three {
    padding: 0 8px;
  }
}
.company-four {
  position: absolute;
  top: 89%;
  left: 5%;
  height: 40px;
  width: 632px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/deep/ .mint-cell-title {
  flex: none !important;
}
.user-company {
  height: 246px;
}
/deep/ .mint-cell-value {
  display: -webkit-inline-box !important;
}
.user-company-photo {
  img {
    height: 160px;
    width: 160px;
  }
}
</style>
